<template>
  <view class="root">
    <u-tabs :list="list" lineColor="#2488F5" lineWidth="25" :current="activeIndex" :activeStyle="{ color: '#333333' }"
      @click="tabsClick"></u-tabs>
    <view class="bottom-wrapper">
      <view class="bottom-inner" v-show="activeIndex === 0">
        <yy-scroll-view request-url="/fj/inspect/list" ref="waitRecheckRef"
          :static-params="{checkType: 2, checkStatus: ''}">
          <template slot-scope="{list}">
            <view class="l-item" v-for="(item, index) in list" :key="index" @click="handleWaitCheck(item)">
              <view class="time">
                <image :src="baseImgUrl + 'check-time.png'" class="img-icon"></image>
                <view class="first-time">首次检查时间：{{item.lastInspectionTime}}</view>
              </view>
              <view class="c-name">
                <view class="c-left">
                  <view class="l-text">
                    {{item.companyMessageName}}
                  </view>
                </view>
                <u-icon name="arrow-right" color="#C7C7C7" size="20"></u-icon>
              </view>
              <view class="info-item">
                <view class="info-label">
                  <image :src="baseImgUrl + 'check-location-01.png'" class="icon-img1"></image>
                  <view class="left-label">
                    营业地址:
                  </view>
                </view>
                <view class="info-value">{{item.address}}</view>
              </view>
              <view class="info-item">
                <view class="info-label">
                  <image :src="baseImgUrl + 'check-items.png'" class="icon-img2"></image>
                  <view class="left-label">
                    所属行业:
                  </view>
                </view>
                <view class="info-value">{{item.industryInformationName}}</view>
              </view>
              <view class="info-item">
                <view class="info-label">
                  <image :src="baseImgUrl + 'check-user.png'" class="icon-img3"></image>
                  <view class="left-label">
                    检查民/辅警:
                  </view>
                </view>
                <view class="info-value">{{item.policeUserNames}}</view>
              </view>
              <view class="info-item">
                <view class="info-label">
                  <image :src="baseImgUrl + 'check-list.png'" class="icon-img4"></image>
                  <view class="left-label">
                    检查类型:
                  </view>
                </view>
                <view class="info-value">{{item.industryExamineName}}</view>
              </view>

              <view class="operater">
                <view class="count-down" v-if="item.countdownDays >= 0">
                  <image :src="baseImgUrl + 'overdue-grey.png'" class="time-img"></image>
                  <view class="o-text">
                    {{`倒计时:${item.countdownDays + 1}天`}}
                  </view>
                </view>
                <view class="overdue" v-else>
                  <image :src="baseImgUrl + 'overdue-red.png'" class="time-img"></image>
                  <view class="o-text">
                    已逾期
                  </view>
                </view>
                <view class="start-check" @click.stop="handleStartCheck(item)">
                  开始复查
                </view>
              </view>
            </view>
          </template>
        </yy-scroll-view>
      </view>

      <view class="bottom-inner" v-show="activeIndex === 1">
        <yy-scroll-view request-url="/fj/inspect/list" ref="doneRecheckRef"
          :static-params="{checkType: 2, checkStatus: 3}">
          <template slot-scope="{list}">
            <view class="l-item" v-for="(item, index) in list" :key="index" @click="handleToRechecked(item)">
              <view class="time">
                <image :src="baseImgUrl + 'check-time.png'" class="img-icon"></image>
                <view class="first-time">复查时间：{{item.checkTime}}</view>
                <view class="qualified" v-if="item.checkResult === 1">
                  合格
                </view>
                <view class="unqualified" v-else>
                  不合格
                </view>
              </view>
              <view class="c-name">
                <view class="c-left">
                  <view class="l-text">
                    {{item.companyMessageName}}
                  </view>
                </view>
                <u-icon name="arrow-right" color="#C7C7C7" size="20"></u-icon>
              </view>
              <view class="info-item">
                <view class="info-label">
                  <image :src="baseImgUrl + 'check-location-01.png'" class="icon-img1"></image>
                  <view class="left-label">
                    营业地址:
                  </view>
                </view>
                <view class="info-value">{{item.address}}</view>
              </view>
              <view class="info-item">
                <view class="info-label">
                  <image :src="baseImgUrl + 'check-items.png'" class="icon-img2"></image>
                  <view class="left-label">
                    所属行业:
                  </view>
                </view>
                <view class="info-value">{{item.industryInformationName}}</view>
              </view>
              <view class="info-item">
                <view class="info-label">
                  <image :src="baseImgUrl + 'check-user.png'" class="icon-img3"></image>
                  <view class="left-label">
                    复查民/辅警:
                  </view>
                </view>
                <view class="info-value">{{item.policeUserNames}}</view>
              </view>
              <view class="info-item">
                <view class="info-label">
                  <image :src="baseImgUrl + 'check-list.png'" class="icon-img4"></image>
                  <view class="left-label">
                    检查类型:
                  </view>
                </view>
                <view class="info-value">{{item.industryExamineName}}</view>
              </view>
            </view>
          </template>
        </yy-scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    navTo,
    handleClickRouter
  } from '../utils/util';
  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        activeIndex: 0,
        list: [{
            name: '待复查'
          },
          {
            name: '已复查'
          }
        ],
        waitRecheckRef: null,
        doneRecheckRef: null
      }
    },
    methods: {
      handleClickRouter,
      tabsClick(item) {
        this.activeIndex = item.index;
        if (this.activeIndex === 0) {
          this.$nextTick(() => {
            this.$refs.waitRecheckRef.getList()
          })
        } else {
          this.$nextTick(() => {
            this.$refs.doneRecheckRef.getList()
          })
        }
      },
      handleStartCheck(item) {
        navTo({
          url: '/venueInspection/reinspection',
          params: {
            ...item,
            companyId: item.companyMessageId,
            checkId: item.policeCheckTaskId,
            companyInfo: {
              lng: item.companyLng,
              lat: item.companyLat
            }
          }
        })
      },
      handleToRechecked(item) {
        navTo({
          url: '/venueInspection/recheckDetail',
          params: {
            ...item
          }
        })
      },
      handleWaitCheck(item) {
        navTo({
          url: `/actual_enterprises/passBusinessDetails?id=${item.companyMessageId}`,
          params: {
            ...item,
            action: 'recheck',
            companyId: item.companyMessageId,
            checkId: item.policeCheckTaskId
          }
        })
      }
    }
  }
</script>

<style>
  page {
    width: 100%;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    /deep/ .u-tabs {
      flex-shrink: 0;
    }

    .bottom-wrapper {
      flex: 1;
      background: #F9F9F9;
      height: 0;
      padding: 10rpx 16rpx;


      .bottom-inner {
        width: 100%;
        height: 100%;

        .l-item {
          padding: 23rpx 16rpx;
          background: #FFFFFF;
          box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(207, 207, 207, 0.16);
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          margin-bottom: 10rpx;

          .time {
            padding-left: 12rpx;
            display: flex;
            align-items: center;
            border-bottom: 1rpx solid #F9F9F9;
            padding-bottom: 10rpx;
            margin-bottom: 11rpx;

            .img-icon {
              width: 26rpx;
              height: 31rpx;
              margin-right: 9rpx;
            }

            .first-time {
              font-weight: 500;
              font-size: 26rpx;
              color: #BBBBBB;
            }

            .qualified {
              background: #E0FFE5;
              border-radius: 4rpx 4rpx 4rpx 4rpx;
              border: 1rpx solid #CAF5D5;
              margin-left: 12rpx;
              font-weight: 500;
              font-size: 24rpx;
              color: #0CAD83;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 2rpx 4rpx;
            }

            .unqualified {
              background: #FFDBE2;
              border-radius: 4rpx 4rpx 4rpx 4rpx;
              border: 1rpx solid #FEBDC9;
              margin-left: 12rpx;
              font-weight: 500;
              font-size: 24rpx;
              color: #EB0101;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 2rpx 4rpx;
            }
          }

          .c-name {
            display: flex;
            justify-content: space-between;
            padding: 13rpx 10rpx;
            background: #F7F7F7;
            align-items: center;
            margin-bottom: 24rpx;

            .c-left {
              display: flex;
              align-items: center;

              .l-img {
                width: 30rpx;
                height: 30rpx;
              }

              .l-text {
                font-weight: bold;
                font-size: 32rpx;
                color: #333333;
              }
            }
          }

          .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 24rpx;
            padding-left: 15rpx;

            .info-label {
              flex-shrink: 0;
              display: flex;
              align-items: center;

              .icon-img1 {
                width: 23rpx;
                height: 31rpx;
              }

              .icon-img2 {
                width: 28rpx;
                height: 28rpx;
              }

              .icon-img3 {
                width: 26rpx;
                height: 29rpx;
              }

              .icon-img4 {
                width: 26rpx;
                height: 26rpx;
              }

              .left-label {
                font-weight: 400;
                font-size: 26rpx;
                color: #A1A1A1;
                margin-left: 14rpx;
                margin-right: 8rpx;
              }

              .info-value {
                font-weight: 500;
                font-size: 26rpx;
                color: #666666;
                margin-left: 8rpx;
              }
            }
          }

          .operater {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .overdue {
              width: 305rpx;
              height: 72rpx;
              background: #FFDBE2;
              border-radius: 36rpx 36rpx 36rpx 36rpx;
              border: 1rpx solid #FEBDC9;
              display: flex;
              justify-content: center;
              align-items: center;

              .time-img {
                width: 32rpx;
                height: 32rpx;
                margin-right: 8rpx;
              }

              .o-text {
                font-weight: 500;
                font-size: 32rpx;
                color: #EB0101;
                line-height: 1;
              }
            }

            .count-down {
              width: 305rpx;
              height: 72rpx;
              background: #F7F7F7;
              border-radius: 8rpx 8rpx 8rpx 8rpx;
              display: flex;
              justify-content: center;
              align-items: center;

              .time-img {
                width: 32rpx;
                height: 32rpx;
                margin-right: 8rpx;
              }

              .o-text {
                font-weight: 500;
                font-size: 32rpx;
                color: #666666;
                line-height: 1;
              }
            }

            .start-check {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 305rpx;
              height: 72rpx;
              background: rgba(36, 112, 242, 0.1);
              border-radius: 36rpx 36rpx 36rpx 36rpx;
              font-weight: 500;
              font-size: 32rpx;
              color: #2470F2;
            }
          }
        }
      }
    }
  }
</style>